<template>
<header class="header">
    <div class="navigation-trigger hidden-xl-up" data-ma-action="aside-open" data-ma-target=".sidebar">
          <div class="navigation-trigger__inner">
              <i class="navigation-trigger__line"></i>
              <i class="navigation-trigger__line"></i>
              <i class="navigation-trigger__line"></i>
          </div>
      </div>

      <div class="header__logo hidden-sm-down">
          <h1><a href="index.html">Material Admin 2.0</a></h1>
      </div>

      <form class="search">
          <div class="search__inner">
              <input type="text" class="search__text" placeholder="Search for people, files, documents...">
              <i class="zmdi zmdi-search search__helper" data-ma-action="search-close"></i>
          </div>
      </form>

      <ul class="top-nav">
          <li class="hidden-xl-up"><a href="index.html" data-ma-action="search-open"><i class="zmdi zmdi-search"></i></a></li>

          <li class="dropdown">
              <a href="index.html" data-toggle="dropdown"><i class="zmdi zmdi-email"></i></a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu--block">
                  <div class="listview listview--hover">
                      <div class="listview__header">
                          Messages

                          <div class="actions">
                              <a href="messages.html" class="actions__item zmdi zmdi-plus"></a>
                          </div>
                      </div>

                      <a href="index.html" class="listview__item">
                          <img src="/static/demo/img/profile-pics/1.jpg" class="listview__img" alt="">

                          <div class="listview__content">
                              <div class="listview__heading">
                                  David Belle <small>12:01 PM</small>
                              </div>
                              <p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
                          </div>
                      </a>

                      <a href="index.html" class="listview__item">
                          <img src="/static/demo/img/profile-pics/2.jpg" class="listview__img" alt="">

                          <div class="listview__content">
                              <div class="listview__heading">
                                  Jonathan Morris
                                  <small>02:45 PM</small>
                              </div>
                              <p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
                          </div>
                      </a>

                      <a href="index.html" class="listview__item">
                          <img src="/static/demo/img/profile-pics/3.jpg" class="listview__img" alt="">

                          <div class="listview__content">
                              <div class="listview__heading">
                                  Fredric Mitchell Jr.
                                  <small>08:21 PM</small>
                              </div>
                              <p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
                          </div>
                      </a>

                      <a href="index.html" class="listview__item">
                          <img src="/static/demo/img/profile-pics/4.jpg" class="listview__img" alt="">

                          <div class="listview__content">
                              <div class="listview__heading">
                                  Glenn Jecobs
                                  <small>08:43 PM</small>
                              </div>
                              <p>Ut vitae lacus sem ellentesque maximus, nunc sit amet varius dignissim, dui est consectetur neque</p>
                          </div>
                      </a>

                      <a href="index.html" class="listview__item">
                          <img src="/static/demo/img/profile-pics/5.jpg" class="listview__img" alt="">

                          <div class="listview__content">
                              <div class="listview__heading">
                                  Bill Phillips
                                  <small>11:32 PM</small>
                              </div>
                              <p>Proin laoreet commodo eros id faucibus. Donec ligula quam, imperdiet vel ante placerat</p>
                          </div>
                      </a>

                      <a href="index.html" class="view-more">View all messages</a>
                  </div>
              </div>
          </li>

          <li class="dropdown top-nav__notifications">
              <a href="index.html" data-toggle="dropdown" class="top-nav__notify">
                  <i class="zmdi zmdi-notifications"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu--block">
                  <div class="listview listview--hover">
                      <div class="listview__header">
                          Notifications

                          <div class="actions">
                              <a href="index.html" class="actions__item zmdi zmdi-check-all" data-ma-action="notifications-clear"></a>
                          </div>
                      </div>

                      <div class="scroll-wrapper listview__scroll scrollbar-inner" style="position: relative;"><div class="listview__scroll scrollbar-inner scroll-content" style="height: 350px; margin-bottom: 0px; margin-right: 0px; max-height: none;">
                          <a href="index.html" class="listview__item">
                              <img src="/static/demo/img/profile-pics/1.jpg" class="listview__img" alt="">

                              <div class="listview__content">
                                  <div class="listview__heading">David Belle</div>
                                  <p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
                              </div>
                          </a>

                          <a href="index.html" class="listview__item">
                              <img src="/static/demo/img/profile-pics/2.jpg" class="listview__img" alt="">

                              <div class="listview__content">
                                  <div class="listview__heading">Jonathan Morris</div>
                                  <p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
                              </div>
                          </a>

                          <a href="index.html" class="listview__item">
                              <img src="/static/demo/img/profile-pics/3.jpg" class="listview__img" alt="">

                              <div class="listview__content">
                                  <div class="listview__heading">Fredric Mitchell Jr.</div>
                                  <p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
                              </div>
                          </a>

                          <a href="index.html" class="listview__item">
                              <img src="/static/demo/img/profile-pics/4.jpg" class="listview__img" alt="">

                              <div class="listview__content">
                                  <div class="listview__heading">Glenn Jecobs</div>
                                  <p>Ut vitae lacus sem ellentesque maximus, nunc sit amet varius dignissim, dui est consectetur neque</p>
                              </div>
                          </a>

                          <a href="index.html" class="listview__item">
                              <img src="/static/demo/img/profile-pics/5.jpg" class="listview__img" alt="">

                              <div class="listview__content">
                                  <div class="listview__heading">Bill Phillips</div>
                                  <p>Proin laoreet commodo eros id faucibus. Donec ligula quam, imperdiet vel ante placerat</p>
                              </div>
                          </a>

                          <a href="index.html" class="listview__item">
                              <img src="/static/demo/img/profile-pics/1.jpg" class="listview__img" alt="">

                              <div class="listview__content">
                                  <div class="listview__heading">David Belle</div>
                                  <p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
                              </div>
                          </a>

                          <a href="index.html" class="listview__item">
                              <img src="/static/demo/img/profile-pics/2.jpg" class="listview__img" alt="">

                              <div class="listview__content">
                                  <div class="listview__heading">Jonathan Morris</div>
                                  <p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
                              </div>
                          </a>

                          <a href="index.html" class="listview__item">
                              <img src="/static/demo/img/profile-pics/3.jpg" class="listview__img" alt="">

                              <div class="listview__content">
                                  <div class="listview__heading">Fredric Mitchell Jr.</div>
                                  <p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
                              </div>
                          </a>
                      </div><div class="scroll-element scroll-x"><div class="scroll-element_outer"><div class="scroll-element_size"></div><div class="scroll-element_track"></div><div class="scroll-bar"></div></div></div><div class="scroll-element scroll-y"><div class="scroll-element_outer"><div class="scroll-element_size"></div><div class="scroll-element_track"></div><div class="scroll-bar"></div></div></div></div>

                      <div class="p-1"></div>
                  </div>
              </div>
          </li>

          <li class="dropdown hidden-xs-down">
              <a href="index.html" data-toggle="dropdown"><i class="zmdi zmdi-check-circle"></i></a>

              <div class="dropdown-menu dropdown-menu-right dropdown-menu--block" role="menu">
                  <div class="listview listview--hover">
                      <div class="listview__header">Tasks</div>

                      <a href="index.html" class="listview__item">
                          <div class="listview__content">
                              <div class="listview__heading">HTML5 Validation Report</div>

                              <div class="progress">
                                  <div class="progress-bar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                          </div>
                      </a>

                      <a href="index.html" class="listview__item">
                          <div class="listview__content">
                              <div class="listview__heading">Google Chrome Extension</div>

                              <div class="progress">
                                  <div class="progress-bar bg-warning" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                          </div>
                      </a>

                      <a href="index.html" class="listview__item">
                          <div class="listview__content">
                              <div class="listview__heading">Social Intranet Projects</div>

                              <div class="progress">
                                  <div class="progress-bar bg-success" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                          </div>
                      </a>

                      <a href="index.html" class="listview__item">
                          <div class="listview__content">
                              <div class="listview__heading">Bootstrap Admin Template</div>

                              <div class="progress">
                                  <div class="progress-bar bg-info" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                          </div>
                      </a>

                      <a href="index.html" class="listview__item">
                          <div class="listview__content">
                              <div class="listview__heading">Youtube Client App</div>

                              <div class="progress">
                                  <div class="progress-bar bg-danger" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                          </div>
                      </a>

                      <a href="index.html" class="view-more">View all tasks</a>
                  </div>
              </div>
          </li>

          <li class="dropdown hidden-xs-down">
              <a href="index.html" data-toggle="dropdown"><i class="zmdi zmdi-apps"></i></a>

              <div class="dropdown-menu dropdown-menu-right dropdown-menu--block" role="menu">
                  <div class="row app-shortcuts">
                      <a class="col-4 app-shortcuts__item" href="index.html">
                          <i class="zmdi zmdi-calendar bg-red"></i>
                          <small class="">Calendar</small>
                      </a>
                      <a class="col-4 app-shortcuts__item" href="index.html">
                          <i class="zmdi zmdi-file-text bg-blue"></i>
                          <small class="">Files</small>
                      </a>
                      <a class="col-4 app-shortcuts__item" href="index.html">
                          <i class="zmdi zmdi-email bg-teal"></i>
                          <small class="">Email</small>
                      </a>
                      <a class="col-4 app-shortcuts__item" href="index.html">
                          <i class="zmdi zmdi-trending-up bg-blue-grey"></i>
                          <small class="">Reports</small>
                      </a>
                      <a class="col-4 app-shortcuts__item" href="index.html">
                          <i class="zmdi zmdi-view-headline bg-orange"></i>
                          <small class="">News</small>
                      </a>
                      <a class="col-4 app-shortcuts__item" href="index.html">
                          <i class="zmdi zmdi-image bg-light-green"></i>
                          <small class="">Gallery</small>
                      </a>
                  </div>
              </div>
          </li>

          <li class="dropdown hidden-xs-down">
              <a href="index.html" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>

              <div class="dropdown-menu dropdown-menu-right">
                  <div class="dropdown-item theme-switch">
                      Theme Switch

                      <div class="btn-group btn-group--colors mt-2" data-toggle="buttons">
                          <label class="btn bg-green active waves-effect"><input type="radio" value="green" autocomplete="off" checked=""></label>
                          <label class="btn bg-blue waves-effect"><input type="radio" value="blue" autocomplete="off"></label>
                          <label class="btn bg-red waves-effect"><input type="radio" value="red" autocomplete="off"></label>
                          <label class="btn bg-orange waves-effect"><input type="radio" value="orange" autocomplete="off"></label>
                          <label class="btn bg-teal waves-effect"><input type="radio" value="teal" autocomplete="off"></label>

                          <br>

                          <label class="btn bg-cyan waves-effect"><input type="radio" value="cyan" autocomplete="off"></label>
                          <label class="btn bg-blue-grey waves-effect"><input type="radio" value="blue-grey" autocomplete="off"></label>
                          <label class="btn bg-purple waves-effect"><input type="radio" value="purple" autocomplete="off"></label>
                          <label class="btn bg-indigo waves-effect"><input type="radio" value="indigo" autocomplete="off"></label>
                          <label class="btn bg-lime waves-effect"><input type="radio" value="lime" autocomplete="off"></label>
                      </div>
                  </div>
                  <a href="index.html" class="dropdown-item">Fullscreen</a>
                  <a href="index.html" class="dropdown-item">Clear Local Storage</a>
              </div>
          </li>

          <li class="hidden-xs-down">
              <a href="index.html" data-ma-action="aside-open" data-ma-target=".chat" class="top-nav__notify">
                  <i class="zmdi zmdi-comment-alt-text"></i>
              </a>
          </li>
      </ul>
  </header>
</template>

<script>
export default {
  name: 'barHeader'
}
</script>

<style>
</style>
